<template>
    <div class="big-box">
        <div class="header">
            <div class="header-big">
                <div class="header-one">
                    <van-search style="width: 6rem" v-model="value1" placeholder="搜索医生、医院或疾病症状" />
                    <van-button class="btn" @click="onSearch">搜索</van-button>
                </div>
                <div class="header-two">
                    <van-tabs v-model="active" line-width="0.2rem">
                        <van-tab 
                        v-for="(item, index) in tabslist" 
                        :key="index" 
                        :title="item.title"
                        title-style="font-size: 0.3rem"
                        >
                    </van-tab>
                    </van-tabs>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="content-center">
                <div class="module1">
                    <div class="moduletitle">
                        <span style="font-size: 0.4rem;font-weight: 900;">相关科普</span>
                        <span style="font-size: 0.35rem; color: #f5f5f5;">查看更多></span>
                    </div>
                </div>
                <div class="module2">

                </div>
                <div class="module3">

                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const title = route.params.title;
const value1 = ref('');
const active = ref(0);
const tabslist = ref([
    { title: '综合', }, { title: '科普', }, { title: '医生', }, { title: '医院', }, { title: '药品', }
])
console.log('接收到的id参数:', title);
const onSearch = () => {

}

</script>
<style scoped>
* {
    font-size: 0.3rem;
}

.big-box {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}

.header {
    width: 100%;
    height: 1.7rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 吸顶 */
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-big {
    width: 95%;
    height: 100%;
}

.btn {
    width: 100%;
    height: 0.6rem;
    font-size: 0.25rem;
    border: none;
    border-left: 1px solid #e5e5e5;
    background: #f7f8fa;
    color: #1e6fff;
}

.header-one {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-two {
    width: 100%;
    height: 50%;
}

.content{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-center{
    width: 90%;
    height: 100vh;
}
.module1{
    width: 100%;
}
.moduletitle{
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>